<template>
  <div :id="keyId" class="line-box" :class="partitionDragInit.info.flexDirection == 'column' ? 'column-style' : 'row-style'">
    <div class="pull-box" v-if="clickClose" @click="handleClick">
      <template v-if="partitionDragInit.info.flexDirection == 'column'">
        <img :src="sanjiaoBottom" style="width: 8px;height: 8px;" v-if="showPullBoxIcon() === 'right'">
        <img :src="sanjiaoTop" style="width: 8px;height: 8px;" v-else>
      </template>
      <template v-else>
        <img :src="sanjiaoRight" style="width: 8px;height: 8px;" v-if="showPullBoxIcon() === 'right'">
        <img :src="sanjiaoLeft" style="width: 8px;height: 8px;" v-else>
      </template>
    </div>
    <div class="xuxian" ref="xuxianRef" v-if="xuxianObj.show" :style="xuxianObj.style"></div>
  </div>
</template>

<script>
import sanjiaoTop from '/src/assets/images/sanjiao-top.png';
import sanjiaoBottom from '/src/assets/images/sanjiao-bottom.png';
import sanjiaoLeft from '/src/assets/images/sanjiao-left.png';
import sanjiaoRight from '/src/assets/images/sanjiao-right.png';
export default {
  name: "partition-drag-line",
  props: {
    keyId: String,
    clickClose: {
      type: Boolean,
      default: () => {
        return true;
      }
    },
    closeDirection: {
      type: String,
      default: "left"
    }
  },
  data: () => {
    return {
      sanjiaoTop,
      sanjiaoBottom,
      sanjiaoLeft,
      sanjiaoRight,
      clientStart: null, // 初始位置
      clientStartY: null,
      oneOriginalFlex: null,
      twoOriginalFlex: null,
      xuxianObj: {
        show: false,
        style: {
          left: 0,
          top: 0
        }
      }
    }
  },
  inject: ["slotSettings", "partitionDragInit"],
  computed: {
    thisIndex() {
      const index = this.slotSettings.findIndex(item => item.keyId === this.keyId);
      return index;
    }
  },
  watch: {
    partitionDragInit: {
      handler(val) {
        if (val.isInit) {
          this.init()
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    init() {
      const moveDom = document.getElementById(this.keyId);
      const thaht = this;
      moveDom.onmousedown = function(e){
        thaht.xuxianObj.show = true;
        thaht.xuxianObj.style.left = 0;
        thaht.xuxianObj.style.top = 0;
        if (thaht.partitionDragInit.info.flexDirection == "column") {
          thaht.clientStart = e.clientY;
        } else {
          thaht.clientStart = e.clientX;
        }
        document.onmousemove = function(e){
          thaht.moveHandle(e);
          return false
        };

        document.onmouseup = function(){
          document.onmousemove = null;
          document.onmouseup = null;
          const one = thaht.slotSettings[thaht.thisIndex - 1];
          const two = thaht.slotSettings[thaht.thisIndex + 1];
          one.originalFlex = thaht.oneOriginalFlex;
          two.originalFlex = thaht.twoOriginalFlex;
          thaht.xuxianObj.show = false;
        };
        return false
      }
    },
    moveHandle(e) {
      const one = this.slotSettings[this.thisIndex - 1];
      const two = this.slotSettings[this.thisIndex + 1];
      let movePX = 0;
      const flexDirection = this.partitionDragInit.info.flexDirection;
      if (flexDirection == "column") {
        movePX = e.clientY - this.clientStart;
        let oneFlex = null;
        let twoFlex = null;
        if (movePX > 0) {
          let xxWare = movePX / this.partitionDragInit.info.offsetHeight * 100;
          if (xxWare < two.originalFlex) {
            oneFlex = one.originalFlex + xxWare;
            twoFlex = two.originalFlex - xxWare;
          }
        } else {
          let xxWare = movePX * -1 / this.partitionDragInit.info.offsetHeight * 100;
          if (xxWare < one.originalFlex) {
            oneFlex = one.originalFlex - xxWare;
            twoFlex = two.originalFlex + xxWare;
          }
        }
        if (oneFlex != null && twoFlex != null) {
          // 计算屏幕宽度
          const oneValue = oneFlex * this.partitionDragInit.info.offsetHeight / 100;
          const twoValue = twoFlex * this.partitionDragInit.info.offsetHeight / 100;
          // console.log("oneValue, twoValue", oneValue, twoValue)
          if (one.minValue && oneValue < one.minValue && movePX < 0) return;
          if (one.maxValue && oneValue > one.maxValue) return;
          if (two.minValue && twoValue < two.minValue && movePX > 0) return;
          if (two.maxValue && twoValue > two.maxValue) return;
          one.flex = oneFlex;
          two.flex = twoFlex;
          one.show = true;
          two.show = true;
          this.xuxianObj.style.top = `${movePX}px`;
        }
      } else {
        movePX = e.clientX - this.clientStart;
        let oneFlex = null;
        let twoFlex = null;
        if (movePX > 0) {
          let xxWare = movePX / this.partitionDragInit.info.offsetWidth * 100;
          if (xxWare < two.originalFlex) {
            oneFlex = one.originalFlex + xxWare;
            twoFlex = two.originalFlex - xxWare;
          }
        } else {
          let xxWare = movePX * -1 / this.partitionDragInit.info.offsetWidth * 100;
          if (xxWare < one.originalFlex) {
            oneFlex = one.originalFlex - xxWare;
            twoFlex = two.originalFlex + xxWare;
          }
        }
        if (oneFlex != null && twoFlex != null) {
          // 计算屏幕宽度
          const oneValue = oneFlex * this.partitionDragInit.info.offsetWidth / 100;
          const twoValue = twoFlex * this.partitionDragInit.info.offsetWidth / 100;
          // console.log("oneValue, twoValue", oneValue, twoValue, oneFlex, twoFlex)
          // console.log("------one.minValue, one.maxValue", one.minValue, one.maxValue)
          // console.log("------two.minValue, two.maxValue", two.minValue, two.maxValue)
          // console.log("movePX", movePX)
          if (one.minValue && oneValue < one.minValue && movePX < 0) return;
          if (one.maxValue && oneValue > one.maxValue && movePX > 0) return;
          if (two.minValue && twoValue < two.minValue && movePX > 0) return;
          if (two.maxValue && twoValue > two.maxValue && movePX < 0) return;
          one.flex = oneFlex;
          two.flex = twoFlex;
          one.show = true;
          two.show = true;
          this.xuxianObj.style.left = `${movePX}px`;
        }
      }
      
      this.oneOriginalFlex = one.flex;
      this.twoOriginalFlex = two.flex;
      // console.log("this.oneOriginalFlex", this.oneOriginalFlex, this.twoOriginalFlex)
    },
    showPullBoxIcon() {
      if (this.closeDirection === "right") {
        const two = this.slotSettings[this.thisIndex + 1];
        if (two && two.show) {
          return "right";
        } else {
          return "left";
        }
      } else {
        const one = this.slotSettings[this.thisIndex - 1];
        if (one && one.show) {
          return "left";
        } else {
          return "right";
        }
      }
    },
    // 单击事件
    handleClick() {
      const one = this.slotSettings[this.thisIndex - 1];
      const two = this.slotSettings[this.thisIndex + 1];
      const closeDirection = this.closeDirection;
      if (closeDirection == "left") {
        if (one.show) {
          // 显示, 需要设置成不显示
          two.flex = two.initFlex + one.initFlex;
          one.flex = 0;
        } else {
          two.flex = two.initFlex;
          one.flex = one.initFlex;
        }
        // console.log("one, two", one, two)
        one.originalFlex = one.flex;
        two.originalFlex = two.flex;
        one.show = !one.show
      } else {
        if (two.show) {
          // 显示, 需要设置成不显示
          one.flex = one.initFlex + two.initFlex;
          two.flex = 0;
        } else {
          two.flex = two.initFlex;
          one.flex = one.initFlex;
        }
        one.originalFlex = one.flex;
        two.originalFlex = two.flex;
        two.show = !two.show
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.line-box {
  position: relative;
  background-color: rgba(221, 221, 221);
  flex-shrink: 0;
}

.column-style {
  width: 100%;
  height: 6px;
  max-height: 6px;
  cursor: n-resize;
}

.row-style {
  width: 6px;
  max-width: 6px;
  cursor: e-resize;
}

.row-style .pull-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  font-size: 8px;
  align-items: center;
  background-color: #AAAAAA;
  height: 50px;
  width: 100%;
  cursor: pointer;
}

.row-style .xuxian {
  border-left: 1px dashed rgba(#000000, 0.3);
  height: 100%;
}

.column-style .pull-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  font-size: 8px;
  justify-content: center;
  background-color: #AAAAAA;
  height: 100%;
  width: 50px;
  cursor: pointer;
}

.column-style .xuxian {
  border-top: 1px dashed rgba(#000000, 0.3);
  width: 100%;
}

.xuxian {
  position: absolute;
  z-index: 1000;
}

</style>